<script lang="ts">
    import { computed, defineComponent, h, unref } from 'vue';
    import BasicButton from './BasicButton.vue';
    import { Popconfirm } from 'ant-design-vue';
    import { extendSlots } from '/@/utils/helper/tsxHelper';
    import { omit } from 'lodash-es';
    import { useAttrs } from '/@/hooks/core/useAttrs';
    import { useI18n } from '/@/hooks/web/useI18n';

    const props = {
        /**
         * Whether to enable the drop-down menu
         * @default: true
         */
        enable: {
            type: Boolean,
            default: true,
        },
    };

    export default defineComponent({
        name: 'PopButton',
        inheritAttrs: false,
        props,
        setup(props, { slots }) {
            const { t } = useI18n();
            const attrs = useAttrs();

            // get inherit binding value
            const getBindValues = computed(() => {
                return Object.assign(
                    {
                        okText: t('common.okText'),
                        cancelText: t('common.cancelText'),
                    },
                    { ...props, ...unref(attrs) }
                );
            });

            return () => {
                const bindValues = omit(unref(getBindValues), 'icon');
                const btnBind = omit(bindValues, 'title') as Recordable;
                if (btnBind.disabled) btnBind.color = '';
                const Button = h(BasicButton, btnBind, extendSlots(slots));

                // If it is not enabled, it is a normal button
                if (!props.enable) {
                    return Button;
                }
                return h(Popconfirm, bindValues, { default: () => Button });
            };
        },
    });
</script>
